<!-- 上传文件 -->
<script lang="ts" setup>
import type { PropType } from 'vue'
import { uploadFiles } from '@/api/common'
import { Close as IconClose } from '@element-plus/icons-vue'
import IconFile from '@/assets/img/icon/icon_file.svg'
import IconWord from '@/assets/img/icon/icon_word.svg'
import IconExcel from '@/assets/img/icon/icon_excel.svg'
import IconPdf from '@/assets/img/icon/icon_pdf.svg'

export interface IFile {
  fileName: string
  path: string
}

const props = defineProps({
  fileList: {
    type: Array as PropType<IFile[]>,
    default() {
      return [] as IFile[]
    }
  },
  disabled: {
    type: Boolean,
    default: false
  },
  multiple: {
    type: Boolean,
    default: true
  },
  limit: {
    type: Number,
    default: 5
  }
})

/**
 * 上传
 * @param file
 */
function uploadEvt(file: File) {
  uploadFiles(file).then((res) => {
    const fileName = res.data.data.fileName[0]
    props.fileList.push({ fileName, path: '111' })
  })
}

/**
 * 点击预览
 */
function previewClick(file: IFile) {}

/**
 * 点击删除
 */
function delClick(index: number) {
  props.fileList.splice(index, 1)
}
</script>

<template>
  <div class="db-upload-bg">
    <el-upload :before-upload="uploadEvt" :show-file-list="false" :multiple="multiple" :limit="limit" :disabled="disabled">
      <el-button type="primary">上传文件</el-button>
    </el-upload>
    <div class="upload-list">
      <template v-for="(file, index) in fileList" :key="index">
        <div class="upload-list-item">
          <div class="upload-list-item-text" @click="previewClick(file)">
            <img :src="IconFile" />
            <div>{{ file.fileName }}</div>
          </div>
          <el-icon class="upload-list-item-icon" @click="delClick(index)" v-if="!disabled"><IconClose /></el-icon>
        </div>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.db-upload-bg {
  width: 100%;
  .upload-list {
    .upload-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px 0 0;
      .upload-list-item-text {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 20px;
          height: 20px;
        }
      }
      .upload-list-item-icon {
        display: none;
        cursor: pointer;
      }
      .upload-list-item-text:hover,
      .upload-list-item-icon:hover {
        color: $color-primary;
      }
    }
    .upload-list-item:hover {
      background-color: #f5f7fa;
      .upload-list-item-icon {
        display: block;
      }
    }
  }
}
</style>
